<template>
  <div class="form">
    <div class="state"></div>
    <div class="state-text">预览</div>
    <label class="form-title">{{ form.title }}</label>
    <el-form :size="form.size" :label-position="form.labelPosition" :label-width="`${form.labelWidth}px`">
      <el-row>
        <el-col v-for="(c, idx) in comps" :key="idx" :style="colStyle" :span="c.propsData.col" class="comp">
          <component :is="getCompWin(c.config.compTag)" :data="c.propsData" :form="form" mode="preview" />
        </el-col>
      </el-row>
    </el-form>
    <div class="footer">
      <el-button style="width: 100px" @click="onClose">关 闭</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElForm } from 'element-plus'
import type { DesignItemStruct } from '@/typings'
import { useComponent } from '../design/render/hooks'

const props = withDefaults(defineProps<{ form: Record<string, any>; comps: DesignItemStruct[] }>(), {})
const emits = defineEmits(['close'])

const colStyle = computed(() => {
  const margin = `margin-top: ${props.form.rowSpacing / 2}px; margin-bottom: ${props.form.rowSpacing / 2}px;`
  return `${margin}`
})

const { getCompWin } = useComponent()
const onClose = () => {
  emits('close')
}
</script>

<style lang="scss" scoped>
.form-title {
  margin-bottom: 20px;
  padding-bottom: 10px;
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: $--size-font-x-large;
  &:after {
    content: '';
    position: absolute;
    border-bottom: 1px solid $--color-text-placeholder; //$--color-border-1level;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.form {
  background-color: #fff;
  padding: 15px;
  .comp {
    padding: 8px;
    margin-left: 0;
    margin-right: 0;
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
  }
}
.footer {
  display: flex;
  justify-content: center;
  padding: 40px 15px 15px 15px;
  &::before {
    content: '';
    position: absolute;
    border-top: 1px solid $--color-text-placeholder;
    top: 15px;
    left: 0;
    right: 0;
  }
}
.state {
  position: absolute;
  top: -8px;
  left: -32px;
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 50px solid $--color-success;
  transform: rotate(135deg);
}
.state-text {
  position: absolute;
  color: #fff;
  font-weight: bold;
  top: 12px;
  left: 8px;
}
</style>
